<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<style>
    #single table th {
        vertical-align: top;
    }
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#single" data-toggle="tab">
            <i class="icon-envelope"></i>
            发送短信
        </a>
    </li>
</ul>

<div class="tab-content" style="margin-top: -20px; padding: 10px;">
    <div class="tab-pane active" id="single">
        <form id="smsForm" class="well form-inline" action="${ctx }/sms/send" method="post">
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <th>手机号：</th>
                    <td>
                        <input name="mobile" type="text" value="${sendVO.mobile }" class="span6" maxlength="239"
                               title="最多20个号码">
                        <br/>
                        <span id="phoneNumber"></span>
                        <span>多个号码以“,”间隔，末尾不留“,”</span>
                    </td>
                </tr>
                <tr>
                    <th>内容：</th>
                    <td>
                        <textarea rows="5" name="content" class="span8">${sendVO.content }</textarea>
                        <br/>
                        <span class="tBlue" id="notice"></span>
                        70字/条短信
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="submit" class="btn btn-primary" value="发 送">
                        <input type="reset" class="btn" value="清 空">
                    </td>
                </tr>

            </table>
        </form>
    </div>
</div>
<script>
    jQuery.validator.addMethod("phoneNumber", function (value, element) {
        var tel = /^([0-9]{11},)*([0-9]{11})$/;
        return this.optional(element) || tel.test($("[name=mobile]").val());
    }, "号码格式不正确");

    $(function () {
        $("#smsForm").validate({
            rules: {
                content: "required",
                mobile: {
                    phoneNumber: true
                }
            }
        });

        $("[name=mobile]").keyup(function () {
            var phoneNumber = Math.ceil($("[name=mobile]").val().length / 12);
            var html = "已输入" + phoneNumber + "个号码，";
            $("#phoneNumber").html(html);
            $("[name=content]").keyup();
        });

        $("[name=content]").keyup(function () {
            var length = $(this).val().length;
            var phoneNumber = Math.ceil($("[name=mobile]").val().length / 12);
            var html = "已输入" + length + "字,共" + (Math.ceil(length / 70) * phoneNumber) + "条短信,";
            $("#notice").html(html);
        });
        sort('stime');
    });
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if>
</body>
</html>